import axios from "axios";
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
const Home = () => {
  const userInfo = localStorage.getItem("userInfo");
  const [isShow, setShow] = useState(true);
  const [list, setList] = useState([]);
  const navigate = useNavigate();
  
  const getList = async () => {
    const resp = await axios.get("/api/list");
    console.log(resp.data.data.data);
    setList(resp.data.data.data);
  };

  useEffect(() => {
    getList();
  }, []);

  return (
    <div>
      {!userInfo && isShow && (
        <div
          style={{
            margin: 10,
            borderRadius: 10,
            border: "1px solid #ccc",
            lineHeight: "36px",
          }}
        >
          快去登录吧！！ <span onClick={() => setShow(false)}>X</span>
        </div>
      )}
      <div>
        {list.map((v) => {
          return (
            <dl
              key={v.id}
              style={{ display: "flex" }}
              onClick={() => navigate("/detail/" + v.id, { state: v })}
            >
              <dt>
                <img src={v.shopImage} alt="" width={120} height={80} />
              </dt>
              <dd>
                <h3>{v.shopName}</h3>
                <p>{v.shopDescription}</p>
              </dd>
            </dl>
          );
        })}
      </div>
    </div>
  );
};

export default Home;
